<template>
  <div v-skeleton="isPageLoad" class="page page-tabbar page-root-category">
    <search id="HeaderTop" class="head-top-search" :fixed="true"/>
    <div class="main">
      <ul class="class">
        <li @click="selectClass=item,fetchTabContent=true" :class="{'is-selected':item.classId===selectClass.classId && item.classId}"
            :key="item.classId"
            v-for="item in classList">
          {{item.className}}
        </li>
      </ul>
      <div class="content">
        <template v-if="!isPageLoad">
          <div class="product-list">
            <div class="banner"></div>
            <ul class="list skeleton">
              <li v-for="item in skeletonList">
                <div class="icon-wrap">
                  <img v-lazy="item.logoUrl">
                </div>
                <p>{{item.className}}</p>
              </li>
            </ul>
          </div>
        </template>
        <class-sub-product-list
          :visible="!!(item.classId===selectClass.classId && selectClass.classId)"
          :banner="item.picUrl"
          :ref="`productContent`+index"
          :class-id="item.classId"
          :key="item.classId"
          v-show="item.classId===selectClass.classId && selectClass.classId"
          v-for="(item,index) in classList"
        />
      </div>
    </div>

  </div>
</template>
<script>
  import './scss/page.root.category.scss'
  import Search from "../../components/Search";
  import page from '../../mixins/page'
  import ClassSubProductList from "./component/Class.Sub.Product.List";

  export default {
    name: 'RootCategory',
    components: {ClassSubProductList, Search},
    mixins: [page],
    data() {
      return {
        classList: this.$skeletonAry(6),
        skeletonList: this.$skeletonAry(6),
        selectClass: {}
      }
    },
    methods: {
      fetchPage() {
        this.$ajax.getProductClassList().then().then(
          res => {
            let proClassOneList = res.data.proClassOneList;
            let classId = parseInt(this.$route.query.classId);
            let classIdIndex = Math.max(proClassOneList.findIndex(item => item.classId === classId), 0);
            this.selectClass = proClassOneList[classIdIndex];
            this.classList = proClassOneList;
            this.$nextTick(() => {
              this.$ajax.getProductClassTwoList({classId: this.selectClass.classId}).then(
                subProductRes => {
                  // 为了防止出现两个loading的情况
                  this.$refs['productContent' + classIdIndex][0].setList(subProductRes.data.proClassTwoList)
                  this.loadEnd();
                }
              )
            })
          },
          err => {
            this.loadError();
          }
        )
      }
    }
  }
</script>
